import React, {PureComponent, useEffect, useState} from "react"
import '@ant-design/compatible/assets/index.css'
import {get} from "../../shared/server"
import MerchantNotFilled from "./components/not-filled"
import MerchantForm from "./components/form/MerchantForm"
import {Spin} from "antd";


const MyMerchant = () => {
  const [data, $data] = useState()
  const [edit, $edit] = useState(false)
  const [loading, $loading] = useState(false)

  useEffect(() => {
    $loading(true)
    get(`/merchant/get`, {})
      .then(res => {
        if (res) {
          res.area = [res.province, res.city, res.county]
          $data(res)
        }
      })
      .finally(() => $loading(false))
  }, [data ? data.id : undefined])


  const renderByData = () => {
    if (loading) {
      return <div className={'loading-box'}>
        <Spin/>
      </div>
    }
    if (!data && !edit) {
      return <MerchantNotFilled onClick={() => $edit(true)}/>
    } else {
      return <MerchantForm data={data}/>
    }
  }

  return (
    <div>
      {renderByData()}
    </div>
  )

}

export default MyMerchant